<?php $this->_extends('_layouts/main_layout'); ?>
<?php $this->_block('title'); ?>
	Tip Manager
<?php $this->_endblock(); ?>

<?php $this->_block('contents'); ?>
<div id="content" class="box">
	<h1>Tip Manager</h1>
	
	<?php foreach($tipArray as $site=>$cv_tips): ?>
		<fieldset>
	    	<legend><?php echo $site; ?></legend>
			<table class="full-size">
				<tbody>
					<tr>
						<th style="width:4%;">Font Size</th>
						<th style="width:4%;">Font Color</th>
						<th style="width:4%;">Background Color</th>
						<th style="width:4%;">Tip Width</th>
						<th style="width:4%;">Tip Height</th>
						<th style="width:4%;">Tip Line-Height</th>
						<th style="width:4%;">Tip Padding</th>
						<th style="width:20%;">Tip Text</th>
						<th style="width:10%;">Tip Description</th>
						<th style="width:4%;">Operate</th>
						<th>Preview</th>
					</tr>
					<?php foreach($cv_tips as $tips):
							foreach($tips as $tip): ?>
						<tr>
							<td><?php echo $tip['font_size'] ?></td>
							<td><?php echo $tip['font_color'] ?></td>
							<td><?php echo $tip['bg_color'] ?></td>
							<td><?php echo $tip['tip_width'] ?></td>
							<td><?php echo $tip['tip_height'] ?></td>
							<td><?php echo $tip['tip_lineheight'] ?></td>
							<td><?php echo $tip['tip_padding'] ?></td>
							<td><?php echo $tip['tip_text'] ?></td>
							<td><?php echo $tip['description'] ?></td>
							<td><label id="<?php echo $tip['id'] ?>Edit" class="tipEdit" style="text-decoration:underline; color:#06F; cursor:pointer;">Edit</label></td>
							<td style="background: #000;">
								<div id="$tip['html_id']" style="position:relative; width:<?php echo $tip['tip_width']; ?>; border:solid 2px #FFF; background-color:<?php echo $tip['bg_color']; ?>">
									<div style="color:#FFF; position:absolute; left:200px; bottom:-14px; font-size:16px;">◆</div>
					    			<div style="color:<?php echo $tip['bg_color']; ?>; position:absolute; left:200px; bottom:-12px; font-size:16px;">◆</div>
					    			<p style="margin:<?php echo $tip['tip_padding']; ?>; font-size:<?php echo $tip['font_size']; ?>; color:<?php echo $tip['font_color']; ?>; font-weight:bolder; line-height:<?php echo $tip['tip_lineheight']; ?>; height:<?php echo $tip['tip_height']; ?>; "><?php echo $tip['tip_text']; ?></p>
								</div>
							</td>
						</tr>
					<?php 	endforeach;
						  endforeach; ?>
				</tbody>
			</table>
		</fieldset>
	<?php endforeach; ?>
	
	<table id='tipinfo'>
        <tr>
            <th>Id:</th>
            <td id='tipinfo_id'></td>
        </tr>
        <tr>
           	<th>Tip Html-Id:</th>
            <td id="tipinfo_htmlId"></td>
        </tr>
        <tr>
            <th>Controller_View:</th>
            <td id='tipinfo_cv'></td>
        </tr>
        <tr>
            <th>Font Size:</th>
            <td> <input type="text" id='tipinfo_fs' />px </td>
        </tr>
        <tr>
            <th>Font Color:</th>
            <td> <input class="iColorPicker" type="text" id='tipinfo_fc' /> </td>
        </tr>
        <tr>
            <th>Background Color:</th>
            <td> <input class="iColorPicker" type="text" id='tipinfo_bc' /> </td>
        </tr>
        <tr>
            <th>Tip Width:</th>
            <td> <input type="text" id='tipinfo_tipWidth' />px </td>
        </tr>
        <tr>
            <th>Tip Height:</th>
            <td> <input type="text" id='tipinfo_tipHeight' />px </td>
        </tr>
        <tr>
            <th>Tip Line-Height:</th>
            <td> <input type="text" id='tipinfo_tipLineHeight' />px </td>
        </tr>
        <tr>
            <th>Tip Padding:</th>
            <td> <input type="text" id='tipinfo_tipPadding' />px </td>
        </tr>
        <tr>
            <th>Tip Text:</th>
            <td><textarea rows="5" cols="30" id='tipinfo_tipText'></textarea> </td>
        </tr>
        <tr>
            <th>Tip Description:</th>
            <td> <input type="text" id='tipinfo_description' /> </td>
        </tr>
        <tr>
        	<th id="editerror"></th>
        	<td><input id="tipEditbtn" type="button" value="Edit" /></td>
        </tr>
    </table>
	
</div>

<script type="text/javascript" src="<?php echo JS_DIR; ?>iColorPicker.js"></script>
<script type="text/javascript">
	$('#tipinfo').dialog({
		autoOpen: false,
		height: 'auto',
		width: 'auto',
		modal: true,
		buttons: {'Quit-Edit': function(){
						$('#iColorPicker').hide();
						$(this).dialog( "close" );
					  }
				 }
	});


	$('.tipEdit').click(function(){
		$.ajax({
			type: 'GET',
			url: "<?echo url('tipmanager/gettipinfo'); ?>",
			data: {
					tipid: $(this).attr('id').replace('Edit', '')
				  },
			success: function(data){
						$.each(data, function(site, cv_tips){
							$.each(cv_tips, function(cv, tips){
								$.each(tips, function(i, tip){
									$('#tipinfo_id').html(tip['id']);
									$('#tipinfo_htmlId').html(tip['html_id']);
									$('#tipinfo_cv').html(tip['controller_view']);
									$('#tipinfo_fs').val(tip['font_size'].replace('px', ''));
									$('#tipinfo_fc').val(tip['font_color']);
									$('#tipinfo_bc').val(tip['bg_color']);
									$('#tipinfo_tipWidth').val(tip['tip_width'].replace('px', ''));
									$('#tipinfo_tipHeight').val(tip['tip_height'].replace('px', ''));
									$('#tipinfo_tipLineHeight').val(tip['tip_lineheight'].replace('px', ''));
									$('#tipinfo_tipPadding').val(tip['tip_padding'].replace('px', ''));
									$('#tipinfo_tipText').val(tip['tip_text']);
									$('#tipinfo_description').val(tip['description']);
								});
							});
						});

						$('#tipinfo').dialog('open');
					 },
			dataType: 'json'
		});
	});

	$('#tipEditbtn').click(function(){
		$.ajax({
			type: 'POST',
			url: "<?echo url('tipmanager/edit'); ?>",
			data: {
					tipinfo_id: $('#tipinfo_id').html(),
					tipinfo_fs: $('#tipinfo_fs').val().replace('px', '') + 'px',
					tipinfo_fc: $('#tipinfo_fc').val(),
					tipinfo_bc: $('#tipinfo_bc').val(),
					tipinfo_tipWidth: $('#tipinfo_tipWidth').val().replace('px', '') + 'px',
					tipinfo_tipHeight: $('#tipinfo_tipHeight').val().replace('px', '') + 'px',
					tipinfo_tipLineHeight: $('#tipinfo_tipLineHeight').val().replace('px', '') + 'px',
					tipinfo_tipPadding: $('#tipinfo_tipPadding').val().replace('px', '') + 'px',
					tipinfo_tiptext: $('#tipinfo_tipText').val(),
					tipinfo_description: $('#tipinfo_description').val()
				  },
			success: function(data){
						if(data == 'true'){
							window.location.href="<?php echo url('tipmanager/index'); ?>";
						}else{
							$('#editerror').val('error happened!');
						}
					 }
		});
	});

</script>
  
<?php $this->_endblock(); ?>